"use client"
import {useSearchParams} from "next/navigation";
import {useState} from "react";
import Productions from "@/constant/Productions";
import Image from "next/image";
import Link from "next/link";
import EmptyLine from "@/components/EmptyLine";
import BottomLinkSection from "@/components/BottomLinkSection";

export default function Page() {
    const params = useSearchParams()
    const id = params.get("id")
    const product = Productions.find((item) => item.id === id)
    if (!product) {
        return (
            <div>

            </div>
        )
    }
    return (
        <div>
            <div className={"max-w-7xl mx-auto mb-20"}>
                <div className={"p-4 sticky top-[64px] bg-white"}>
                    <div><Link href={'/'} className={"hover:text-blue-500"}>首页</Link> / <Link href={'/specialty'}
                                                                                                className={"hover:text-blue-500"}>特色与产业</Link> / <Link
                        className={"text-gray-500"} href={'#'}>详情</Link></div>
                </div>
                <div className={"grid grid-cols-12 gap-4"}>
                    <div className={"col-span-12 md:col-span-5"}>
                        <Image src={product.cover} alt={''} width={800} height={320}
                               className={"w-full h-full rounded-md object-cover"}/>
                    </div>
                    <div className={"col-span-12 md:col-span-7 flex flex-col h-[320px]"}>
                        <div className={"flex-1"}>
                            <div className={"text-xl font-bold"}>{product.title}</div>
                            <div className={"text-sm mt-2"}>{product.description}</div>
                            <EmptyLine height={1} className={"my-2 bg-gray-300"}/>
                            <div className={"text-xs"}>
                                服务说明
                                满48元包邮
                                由XCXXXS提供商品、发货开票及售后服务

                            </div>
                            <div className={"text-gray-500"}>商品编码 {`${new Date().getFullYear()}${product.id}`}</div>
                        </div>
                        <div>
                            <div>价格 <span>￥</span><span className={"text-2xl font-bold text-red-500"}>???</span></div>
                            <div className={"flex items-center gap-x-2 mt-4"}>
                                <div className={"bg-blue-500 px-6 py-2 text-white rounded-full"}>供应链</div>
                                <div className={"bg-orange-500 px-6 py-2 text-white rounded-full"}>批发采购</div>
                                <div className={"bg-red-500 px-6 py-2 text-white rounded-full"}>预约订购</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <EmptyLine height={1} />
            <div className={"my-20 px-4 max-w-7xl mx-auto"}>
                <h2 className="text-2xl font-bold mb-4">商品预约说明</h2>
                <p className="text-lg mb-4">
                    尊敬的顾客，感谢您对我们商品的关注与支持！为了更好地为您提供服务，我们特别推出了商品预约服务。
                </p>
                <div className="mb-4">
                    <strong className="text-lg">预约说明：</strong>
                    <ul className="list-disc list-inside">
                        <li>预约时间：请您提前30天进行商品预约，以确保我们有足够的准备时间。</li>
                        <li>预约流程：请通过我们的官方网站或联系客服进行预约，提供您的姓名、联系方式和预约日期。</li>
                        <li>预约确认：我们将在收到您的预约信息后尽快与您确认，并为您安排相关事宜。</li>
                        <li>预约保留：预约成功后，我们将为您保留商品，并在预约日期当天为您提供优先服务。</li>
                        <li>取消预约：如需取消预约，请提前通知我们，以便我们能够及时调整安排。</li>
                    </ul>
                </div>
                <p className="text-lg">感谢您的理解和支持！我们期待为您提供优质的商品和满意的服务。如有任何疑问或需要进一步的帮助，请随时与我们联系。祝您购物愉快！</p>
            </div>
            <BottomLinkSection />
        </div>
    )
}